<script setup lang="ts">
import type { ToDo } from '@/stores/types'
import { useTodoStore } from '@/stores/modules/todo'
import VantField from '@/components/VantField.vue'
const { updateTodo, deleteTodo } = useTodoStore()
const props = defineProps<{
  todos: ToDo[]
}>()
const handleChange = (item: ToDo) => {
  updateTodo({
    id: item._id,
    todo: item
  }).then(() => {
    console.log(props.todos)
  })
}
const handleUpdate = (content: string, item: ToDo) => {
  console.log(content)
  handleChange(Object.assign({}, item, { content: content[0] }))
}
const handleDelete = (id: string) => {
  deleteTodo(id)
}
</script>

<template>
  <div class="todo-list">
    <div class="todo-item" v-for="item in todos" :key="item._id">
      <van-checkbox v-model="item.isdone" @change="handleChange(item)"></van-checkbox>
      <p class="text">
        <VantField
          :content="item.content"
          @update="(v) => handleUpdate(v, item)"
          @delete="handleDelete(item._id)"
        ></VantField>
      </p>
    </div>
  </div>
</template>
<style lang="scss">
.todo-list {
  .todo-item {
    height: 0.6rem;
    width: 100%;
    margin-top: 0.1rem;
    border-radius: 0.15rem;
    background-color: #fff;
    padding: 0 0.2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .text {
      font-size: 0.16rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
      margin-left: 0.1rem;
    }
  }
}
</style>
